<template>
  <div class="info-wrapper">
    <div class="update-address">
      <div class="address">
        <i class="iconfont">&#xe617;</i>
        收货地址
      </div>
    </div>
    <div class="name">{{name}}</div>
    <div class="phone">{{phone}}</div>
    <div class="address-info">{{address}}</div>
  </div>
</template>
<script>
import { codeTime } from '@/assets/js/util'
import commonWx from '@/assets/js/wx'
export default {
  name: 'CommonAddressInfo',
  created () {
    this.getAddress()
  },
  data () {
    return {
      name: '',
      phone: '',
      address: ''
    }
  },
  methods: {
    getAddress () {
      codeTime(commonWx.getCode).then((res) => {
        commonWx.openAddress(this.getAddressSucc)
      })
    },
    getAddressSucc (res) {
      const length = Object.keys(res).length
      if (length > 6) {
        this.name = res.userName
        this.phone = res.telNumber
        this.address = res.provinceName + res.cityName + res.countryName + res.detailInfo
      } else {
        this.$router.back()
      }
    }
  },
  watch: {
    address (address) {
      this.$emit('address', address, this.phone, this.name)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.info-wrapper
  width 100%
  background-color $common_bgc
  border-radius 24px
  padding-top 25px
  padding-bottom 25px
  padding-left 30px
  padding-right 30px
  box-sizing border-box
  margin-bottom 20px

  .update-address
    display flex
    justify-content space-between
    margin-bottom 30px

    .address, update
      font-size $address
      font-weight 500
      color $footer_bgc
      line-height 42px

      i
        font-size $common_fz
        color $address_i

    .update
      color $original_price
      text-indent 35px

  .name, .phone, .address-info
    font-size $address_name
    font-weight 400
    color $footer_bgc
    line-height 38px
    margin-bottom 30px
    text-indent 35px

  .address-info
    margin-bottom 0
</style>
